<template>
	<div>
		<!-- 添加问题 -->
		<div style="margin-top: 5%;">
			<van-field v-model="question_title" rows="2" autosize label="问题描述" type="textarea" maxlength="200"
				placeholder="请输入问题简要描述" show-word-limit @input="change1" />
			</van-field>
		</div>
		<div style="margin-top: 5%;">
			<van-field v-model="question" rows="2" autosize label="问题详情" type="textarea" maxlength="50000"
				placeholder="请输入问题详细描述" show-word-limit @input="change2" />
			</van-field>
		</div>
		<!-- 选择专家 -->
		<div>
			<div style="position: absolute;top: 23%;z-index: 99;left: 5%;color: red;">
				若要想得到某一专家回答，下滑选择专家
			</div>
			<van-picker title="" :columns="columns" @change="onChange" />
		</div>

		<!-- 添加问题辅助材料 -->
		<div class="opinion_div3">
			<div v-for="(item, i) in imgArr" :key="i" v-if="a" style="margin-left: 5px;margin-right: 20px;">
				<image :src="imgArr[i]" v-if="imgArr[i].includes('jpg') || imgArr[i].includes('png')"
					style="width: 100px;height: 100px;" @longpress="deleteimg(i)"></image>
				<video :src="imgArr[i]" v-if="imgArr[i].includes('mp4')" style="width: 100px;height: 100px;"
					@longpress="deleteimg(i)"></video>
			</div>
			<div @click="getFile()">
				<image src="https://czsc.oss-cn-beijing.aliyuncs.com/mini/opinion_add.png"
					style="width: 100px;height: 100px;padding-left: 10px;">
				</image>
			</div>
		</div>

		<div>
			<van-action-sheet :show="show" :actions="actions" cancel-text="取消" @close="toggleActionSheet"
				@cancel="toggleActionSheet" @select="deleteyes" />
		</div>

		<div style="position: fixed;bottom: 30px;width: 100%;">
			<van-button type="primary" size="large" @click="submile()">提交</van-button>
		</div>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				question: '',
				imgArr: [],
				flagurl: '',
				a: false,
				show: false,
				deleteid: '',
				actions: [{
					name: '删除'
				}],
				columns: [' '],
				expert_name: ' ',
				checked: '1',
				question_id: '',
				question_title: ''
			}
		},
		created() {
			uni.request({
				method: 'GET',
				url: 'https://www.gjegm.ltd/czsczq/expertMessage/getAllExpertName',
				data: {},
				header: {
					'content-type': 'application/x-www-form-urlencoded',
					'token': uni.getStorageSync('token')
				},
				success: (res) => {
					for (let i = 0; i < res.data.obj.length; i++) {
						this.columns.push(res.data.obj[i].expertName);
					}
				}
			});
		},
		methods: {
			change1(event) {
				this.question_title = event.detail;
			},
			change2(event) {
				this.question = event.detail;
			},
			getFile() {
				const that = this;
				if (this.imgArr.length > 8) {
					uni.showToast({
						title: '最多上传九个文件!',
						duration: 1500,
						icon: 'none'
					})
					return;
				}
				if (this.imgArr.length <= 8) {
					let index = 0;
					uni.chooseMedia({
						count: 9, //默认9
						mediaType: ['mix'],
						sourceType: ['album'], //从相册选择
						success: function(res) {
							if (that.imgArr.length == 0) {
								that.a = true
								var tempFilePaths = res.tempFiles;
								for (var i = 0; i < tempFilePaths.length; i++) {
									that.imgArr[i] = tempFilePaths[i].tempFilePath
								}
							} else {
								that.a = false
								var tempFilePaths = res.tempFiles;
								for (var i = 0; i < tempFilePaths.length; i++) {
									that.imgArr[that.imgArr.length] = tempFilePaths[i].tempFilePath
								}
								that.a = true
							}
						}
					})
				}
			},
			deleteimg(i) {
				this.show = !this.show;
				this.deleteid = i;
			},
			toggleActionSheet() {
				this.show = !this.show
			},
			deleteyes() {
				this.imgArr.splice(this.deleteid, 1)
				if (this.imgArr.length == 0) {
					this.a = false
				}
			},
			uploadFiles(i) {
				const that = this;
				wx.uploadFile({
					// 需要上传的地址
					url: 'https://www.cr12cz.cn/czscsms/up/upload',
					// filePath  需要上传的文件
					filePath: this.imgArr[i],
					name: 'file',
					header: {
						'content-type': 'multipart/form-data'
					},
					formData: {
						userid: uni.getStorageSync("userid")
					},
					success: function(res1) {
						const url_data = JSON.parse(res1.data);
						uni.request({
							method: 'POST',
							url: 'https://www.gjegm.ltd/czsczq/expertQuestionMaterial/addQuestionMaterial',
							data: {
								question_uuid: that.question_id,
								url: url_data.obj,
								name: url_data.message
							},
							header: {
								'content-type': 'application/x-www-form-urlencoded',
								'token': uni.getStorageSync('token')
							},
							success: (res) => {
								console.log(res)
								if (i === that.imgArr.length - 1 && res.data.obj) {
									uni.hideLoading();
									that.question = '';
									that.expert_name = ' ';
									that.imgArr = [];
									uni.showToast({
										title: '问题提交成功!',
										mask: true,
										icon: 'none'
									})
								}
							}
						});
					},
					fail: function(res2) {
						console.log(res2)
					}
				})
			},
			uuid() {
				const s = [];
				const hexDigits = '0123456789abcdef';
				for (let i = 0; i < 36; i++) {
					s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
				}
				s[14] = '4';
				s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
				s[8] = s[13] = s[18] = s[23] = '-';

				this.uuidA = s.join('');
				return this.uuidA;
			},
			onChange(value, index) {
				this.expert_name = value.detail.value;
			},
			submile() {
				if (this.question === ''){
					uni.showToast({
						title: '问题不可为空!',
						mask: true,
						icon: 'none'
					});
				}else {
					this.question_id = this.uuid();
					uni.request({
						method: 'POST',
						url: 'https://www.gjegm.ltd/czsczq/expertQuestion/addQuestion',
						data: {
							question: this.question,
							question_title: this.question_title,
							uuid: this.question_id,
							username: uni.getStorageSync('username'),
							specialuser: this.expert_name,
							userid: uni.getStorageSync('userid'),
							filenum: this.imgArr.length
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							'token': uni.getStorageSync('token')
						},
						success: (res) => {
							if (res.data.obj && this.imgArr.length > 0) {
								uni.showLoading({
									title: '提交中......'
								});
								for (let i = 0; i < this.imgArr.length; i++) {
									this.uploadFiles(i);
								}
							}
							if (res.data.obj) {
								this.question = '';
								this.expert_name = ' ';
								this.imgArr = [];
								uni.showToast({
									title: '问题提交成功!',
									mask: true,
									icon: 'none'
								})
							}
						}
					});
				}
				
			}
		}
	}
</script>

<style>
	.opinion_div3 {
		padding-top: 10px;
		width: 100%;
		display: flex;
		height: 90px;
		background-color: #FFFFFF;
		flex-flow: row wrap
	}
</style>
